<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sonos Companion</title>

        <!--<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">-->
        <link href="{{ url_for('static', filename='css/main5.css') }}" rel="stylesheet">
    </head>
    
      <body class="Container">
            <div class="Header">
                <div class="row">
                    <button id="previous" class="btn"><i class="icon-backward"></i> Previous</button>
                    <button id="pause" class="btn"><i class="icon-pause"></i> Pause</button>
                    <button id="next" class="btn"><i class="icon-forward"></i> Next</button>
                </div>
                <p id="track-artist_info"></p>
            </div>
     <div class="Content">
            <div class="Wrapper">
                <div class="LeftContent">
                    <div id="card">
                       <!--background image goes here-->
                    </div>
                </div>

                <div class="RightContent">
                    <h1 id="track-title"></h1>
                    <h2 id="track-artist"></h2>
                    <h2 id="track-album"></h2>
                    <h3 id="track-date"></h3>
				    <p id="track-lyrics" class="lyrics"></p>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
        <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

        <script type="text/javascript">
            var currTrack = '';
            var playing = true;
            var n = 0

            function checkChange() {
                $.getJSON('/info-light').done(function(data) {
                    $('#track-title').text(data['title']);

                    if (currTrack != data['title'])
                    {
                        loadData();
                        n = 0;
                    }
                    
                    else {$.getJSON('/images').done(function(data) {

                    $('.image-wrap').fadeTo("slow",0.1)
                    
					console.log(n)
					console.log(data[n]['image']['width']);
					console.log(data[n]['image']['height']);
					console.log(data[n]['link']);
                    
                    $('.image-wrap').fadeTo(400,0.1)
                    
                    setTimeout(fade_out, 400);
                    
                    function fade_out() {
                    
                    $('#card').html('<span class="image-wrap" style="background: url(' + data[n]['link'] + ')no-repeat center;" /></span>')
				
                    $('.image-wrap').fadeTo(600,1.0);}
                

                n+=1;

                if (n==9) {n=0;}

                });
                
                 }

                });
            }

            function loadData() {
                $.getJSON('/info').done(function(data) {
                    $('#track-title').text(data['title']);
                    $('#track-artist').text(data['artist']);
                    $('#track-album').text(data['album']);
                    $('#track-date').text(data['date']);
                    $('#track-artist_info').text(data['artist_info']);
					$('#track-lyrics').text(data['lyrics']);
                    $('#card').empty();
                    $('#card').html('<span class="image-wrap" style="background:url(' + data['album_art'] + ') no-repeat center;" /></span>');
                    
                    $('.image-wrap').fadeTo(600,1.0)

                    currTrack = data['title'];
                });
            }

            $(document).ready(function() {   //run only once when the page is initially loaded then everything is ajax
                loadData();
                
                console.log("document.ready was triggered");  


                setInterval("checkChange()", 10000);

                $('#next').click(function() {
                    $.ajax('/next');
                    loadData();
                });

                $('#previous').click(function() {
                    $.ajax('/previous');
                    loadData();
                });

                $('#pause').click(function() {
                    if (playing == true)
                    {
                        $.ajax('/pause');
                        playing = false;

                        $('#pause').html('<i class="icon-play"></i> Play');
                    }
                    else {
                        $.ajax('/play');
                        playing = true;

                        $('#pause').html('<i class="icon-pause"></i> Pause');
                    }
                });
            });
        </script>
   </body>
</html>
